import Dialog from './dialog';
import scroller from './scroller';
import newsItemTemplate from '../_tpl/news_item.ejs';
import tplArticle from '../_tpl/article.ejs';

export default function init() {
    const tabs = [
        {
            key: 'COMPANY_NEWS',
            value: '公司新闻'
        },
        // {
        //     key: 'VIDEO_AREA',
        //     value: '视频专区'
        // },
        // {
        //     key: 'INDUSTRY_DYNAMICS',
        //     value: '行业动态'
        // },
        // {
        //     key: 'RESEARCH_REPORT',
        //     value: '行研报告'
        // }
    ];

    const $rootSwiper = $('#swiper-infos');
    const $childSwiper = $rootSwiper.find('.swiper-container');
    const $articleScroller = $('#section-infos .article-scroller');

    const rootSwiper = new Swiper('#swiper-infos', {
        speed: 0,
        initialSlide: 2,
        simulateTouch: false,
        centeredSlides: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            renderBullet: (current, className) => {
                return `<span class="${className}">${tabs[current].value
                    }</span>`;
            }
        }
    });

    let articleScroller;

    const dialog = new Dialog('#dialog-article', {
        onOpen: () => {
            articleScroller = scroller('.article-scroller');
        }
    });

    tabs.forEach((tab, i) => {
        tab.index = i;
        tab.swiper = new Swiper($childSwiper[i], {
            simulateTouch: false,
            slidesPerView: 3
        });
        tab.getData = getNewsFactory(tab);
        tab.getData();
    });

    $rootSwiper
        .on('click', '.news', function () {
            const $el = $(this);
            const index = $el.data('index');
            const tab = $el.data('tab');

            const data = tabs[tab].data[index];
            $articleScroller.html(tplArticle(data));
            dialog.open();
        })
        .on('click', '.swiper-button-prev', function () {
            const { swiper } = tabs[$(this).data('index')];
            swiper.slidePrev();
        })
        .on('click', '.swiper-button-next', function () {
            const { swiper, count, getData } = tabs[$(this).data('index')];
            if (swiper.isEnd && count > swiper.slides.length) {
                getData(() => swiper.slideNext());
                return;
            }
            swiper.slideNext();
        });
}

function getNewsFactory(tab, row = 3) {
    let page = 0;
    let pending = false;
    const url = `/c/News/lists?type=${tab.key}&row=${row}`;

    return cb => {
        if (pending) return;
        pending = true;
        $.ajax({
            url: `${url}&page=${page}`,
            type: 'GET',
            success: res => {
                pending = false;
                tab.count = res.count;
                tab.data = tab.data ? [...tab.data, ...res.list] : res.list;
                const newslist = res.list.map((item, i) => {
                    const $item = $(
                        newsItemTemplate({
                            ...item,
                            tab: tab.index,
                            index: page * row + i
                        })
                    );
                    const $desc = $item.find('.desc');
                    $desc.html($desc.text());
                    return $item[0].outerHTML;
                });
                if (tab.count < 3) {
                    tab.swiper.$el.parent().addClass('no-nav');
                }
                if (newslist.length) tab.swiper.appendSlide(newslist);
                cb && cb();
                page++;
                // $newsUl.append(newslist);
            }
        });
    };
}
